import React, {useEffect, useState} from 'react';
import {
  TextInput,
  StyleSheet,
  PixelRatio,
  Image,
  StatusBar,
  ScrollView
} from 'react-native';
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';
import {ILeavedUnused, ICarousel, IGoods} from '../../models/goods';
import Touchable from '../../components/Touchable';
import {
  getWidth,
  getHeight,
  windowHeight,
  windowWidth,
} from '../../utils/index';
import Carousel, {Pagination} from 'react-native-snap-carousel';
import LinearGradient from 'react-native-linear-gradient';
const mapStateToProps = ({goods, loading}: RootState) => {
  return {
    // leavedUnuseds: goods?.leavedUnuseds,
    // 在触发getGoodsList方法时加上加载效果
    loading: loading.effects['goods/getGoodsList'],
  };
};
const connector = connect(mapStateToProps);
// 获取映射出来的props的类型，给IProps做定义
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {
  navigation: {navigate: any};
}

import {View, Text} from 'react-native';
function LeaveUnused(props: IProps) {
  const {dispatch,navigation} = props;
  const [carousels, setCarousel] = useState<ICarousel[]>([]);
  const [goods, setGoods] = useState<IGoods[]>([]);
  const [selectId,setSelectId] = useState<string>();
  useEffect(() => {
    dispatch({
      type: 'goods/getGoodsList',
      callback: (leaves: ILeavedUnused[]) => {
        console.log('callback拿到了数据', leaves[0]?.carousels);
        leaves[0].carousels && setCarousel(leaves[0].carousels);
        leaves[0].goods && setGoods(leaves[0].goods);
      },
    });
  }, []);
  const handlePress=(goods_id:string)=>{
    // console.log("Good_id",goods_id)
    navigation.navigate("GoodsInfo",{
      goods_id:goods_id
    });
  }
  const renderBanner = ({item}: {item: ICarousel}) => {
    return (
      <View
        style={{
          height: 300,
          width: '100%',
        }}>
        <Image
          source={{
            uri: item.carousel_url,
          }}
          style={{
            height: getHeight(32),
            width: '100%',
            borderRadius: 10,
          }}></Image>
      </View>
    );
  };
  return (
    <View style={styles.leavedBox}>
      <StatusBar backgroundColor="#fff" barStyle="dark-content" />
      <LinearGradient
        colors={['#fff', '#A75E5E']}
        style={styles.linearGradient}>
        <View style={styles.search}>
          <TextInput
            placeholder="请输入商品名称进行搜索"
            style={styles.text_input}
            onChangeText={text => {
              console.log('text', text);
            }}
            // value={nameValue}
          />
          <Touchable
            onPress={() => {
              console.log('搜索');
            }}>
            <Text style={styles.btn}>搜索</Text>
          </Touchable>
        </View>
        {/* 轮播图区域 */}
        <View
          style={{
            backgroundColor: 'transparent',
            marginVertical: 10,
            position: 'relative',
            justifyContent: 'flex-end',
            alignItems: 'center',
            height: getHeight(32),
          }}>
          <Carousel
            autoplay={true}
            data={carousels}
            renderItem={renderBanner}
            sliderWidth={windowWidth}
            sliderHeight={getHeight(32)}
            itemWidth={getWidth(90)}
            itemHeight={getHeight(32)}
            loop={true}
          />
        </View>
      </LinearGradient>
      <View style={styles.bottom}>
      <View style={styles.title}><Text style={styles.titleText}>商品信息</Text></View>
      <ScrollView style={styles.goods}>
          <View style={styles.scrollView}>
          {
            goods && goods.map( item => {
              // item.goods_id && setSelectId(item.goods_id);
              console.log("作为key的goods_id",item.goods_id)
              return (
                <Touchable style={styles.goodsBox} key={item.goods_id} onPress={()=>{handlePress(item.goods_id)}}>
                  <Image
                    source={{uri: item.goods_image}}
                    style={styles.image}></Image>
                  <Text style={styles.title1}>{item.goods_title}</Text>
                  <Text style={styles.money}>￥：{item.money}</Text>
                </Touchable>
              );
            })
          }
          </View>
        </ScrollView>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  leavedBox: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  linearGradient: {
    width: '100%',
    height: getHeight(37),
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5,
    marginBottom:40,
  },
  search: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
  },
  text_input: {
    height: 40,
    width: getWidth(70),
    borderColor: '#A75E5E',
    borderWidth: 1 / PixelRatio.get(),
    borderRadius: 20,
    fontSize: 14,
    padding: 0,
    paddingLeft: 20,
    marginRight: 20,
    color: '#999',
  },
  btn: {
    width: getWidth(15),
    backgroundColor: '#A75E5E',
    color: '#fff',
    textAlign: 'center',
    borderRadius: 20,
    height: 40,
    lineHeight: 40,
  },
  bottom:{
    // width:"100%",
    flex:1,
  },
  title:{
    width:"100%",
    height:38,
    display:"flex",
    justifyContent:"center",
    paddingLeft:20,
    // backgroundColor:"#999",
    lineHeight:38,
    textAlign:"center"
  },
  titleText:{
    fontSize:18,
    fontWeight:"700",
    color:"#A75E5E"
  },
  goods: {
    width:windowWidth,
    paddingHorizontal:6,
  },
  scrollView:{
      width:windowWidth,
      display:"flex",
      flexDirection:"row",
      flexWrap:"wrap",
  },
  goodsBox:{
    width:"46%",
    marginHorizontal:"1%",
    height:280,
    borderRadius:6,
    backgroundColor:"#fff",
    marginBottom:10,
    shadowColor:"#999",
    shadowOpacity:0.8,
    shadowOffset:{width:10,height:10},
    shadowRadius:10
  },
  image:{
    width:"100%",
    height:200,
    borderRadius:6,
  },
  title1:{
    paddingTop:15,
    paddingLeft:10,
    paddingBottom:5
  },
  money:{
    color:"black",
    fontWeight:"700",
    paddingLeft:10
  }


});
export default connector(LeaveUnused);
